<template>
  <FormItem
    :label="label"
    :prop="prop"
    :label-width="labelWidth"
    :rules="rules"
  >
    <template v-if="currentValue && currentValue.length">
      <template>
        <div
          class="demo-upload-list"
          v-for="(item, i) in currentValue"
          :key="i"
        >
          <img :src="item.url" />
          <div class="demo-upload-list-cover">
            <Icon
              type="ios-eye-outline"
              @click.native="handleView(item.name, item.url)"
            ></Icon>
            <Icon
              type="ios-trash-outline"
              v-show="operateType !== 'view'"
              @click.native="handleRemove(item)"
            ></Icon>
          </div>
        </div>
      </template>
    </template>

    <Upload
      ref="upload"
      :before-upload="beforeUpload"
      :max-size="20480"
      :show-upload-list="false"
      :format="['jpg','jpeg','png']"
      :multiple="multiple"
      type="drag"
      action
      style="display: inline-block;width:68px;"
    >
      <div style="width: 68px;height:68px;line-height: 68px;">
        <Icon
          type="ios-camera"
          size="20"
        ></Icon>
      </div>
    </Upload>

    <Modal
      title="View Image"
      v-model="visible"
    >
      <img
        :src="imgUrl"
        v-if="visible"
        style="width: 100%"
      />
    </Modal>
    <slot></slot>
  </FormItem>
</template>

<script>
import commonItem from './commonItem'
import { getFileUrl, defaultBase64 } from './../utils'
import { FormItem, Icon, Upload, Modal } from 'view-design'
const defaultUploadFn = () => {
  let result = new Promise(resolve =>
    setTimeout(
      () =>
        resolve({
          data: { url: defaultBase64 },
          success: true,
          message: ''
        }),
      1000
    )
  )
  return result
}
export default {
  name: 'UploadItem',
  components: { FormItem, Icon, Upload, Modal },
  mixins: [commonItem],
  data () {
    return {
      fileList: [],
      imgName: '',
      imgUrl: '',
      visible: false
    }
  },
  computed: {
    // 是否为多选
    multiple () {
      let { multiple = false } = this.info
      return multiple
    },
    // 传入的上传方法
    uploadFn () {
      let { uploadFn = defaultUploadFn } = this.info
      return uploadFn
    }
  },
  methods: {
    // 这里处理上传交互
    beforeUpload (file) {
      this.uploadFile(file)
      return false
    },
    async uploadFile (file) {
      let url = getFileUrl(file)
      this.$emit('update', true)
      let { success, data, message } = await this.uploadFn(file)
      this.$emit('update', false)
      if (success) {
        this.$Message.success(message || '上传成功！')
        this.fileList.push({ url })
        this.currentValue.push(data)
        this.$emit('input', this.currentValue)
      } else {
        this.$Message.error(message || '上传失败！')
      }
    },
    handleView (name, url) {
      this.imgName = name
      this.imgUrl = url
      this.visible = true
    },
    handleRemove (file) {
      this.currentValue.splice(this.currentValue.indexOf(file), 1)
      this.$emit('input', this.currentValue)
    }
  },
  created () {
    this.currentValue = this.value || []
  }
}
</script>

<style>
.demo-upload-list {
  display: inline-block;
  width: 70px;
  height: 70px;
  text-align: center;
  line-height: 70px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
